<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<h2 class='aui-gutter-column-md'>{{ 'explore_real_time_detection_alarm_label' | i18n }}</h2>
<div class="aui-paginator-container">
    <ng-container *ngIf="!total">
        <div class="alarm-no-data">
            <lv-empty></lv-empty>
        </div>
    </ng-container>
    <ng-container *ngIf="!!total">
        <lv-radio-group #group [lvGroupName]="'alarmGroup'">
            <lv-group class="alarm-group">
                <ng-container *ngFor="let item of alarmData">
                    <lv-radio [lvViewType]="'custom'" [lvValue]="item.vstoreName" class="alarm-radio">
                        <div class="alarm-card">
                            <div class="card-top">
                                <i lv-icon="aui-icon-vstore"></i>
                                <span class="alarm-name" lv-overflow>{{item.vstoreName}}</span>
                            </div>
                            <div class="card-bottom">
                                <span class="alarm-title">{{'common_alarms_label' | i18n}}</span>
                                <span class="statistics-tag">
                                    <i lv-icon="aui-icon-anti-alarm"></i>
                                    <span class='count-label'>
                                        {{item.alarmCount + (item?.sanAlarmCount || 0)}}
                                    </span>
                                </span>
                            </div>
                            <lv-group lvGutter="12px" style="margin-left: 40px;" lvDirection="vertical">
                                <span *ngIf="item?.alarmCount" class='aui-link detail-label' lv-overflow (click)="getDetail(item)">
                                 {{item.alarmCount}}
                                 {{ 'explore_count_system_alarm_label' |i18n }}
                             </span>
                             <span *ngIf="item?.sanAlarmCount" class='aui-link detail-label' lv-overflow (click)="getDetail(item, true)">
                                 {{item?.sanAlarmCount}}
                                 {{ 'explore_san_count_system_alarm_label' |i18n }}
                             </span> 
                             </lv-group>
                        </div>
                    </lv-radio>
                </ng-container>
            </lv-group>
        </lv-radio-group>
    </ng-container>
</div>
<div class="aui-paginator-wrap">
    <lv-paginator [lvPageSize]="pageSize" [lvPageIndex]="pageIndex" [lvTotal]="total"
        (lvPageChange)="pageChange($event)" [lvPageSizeOptions]="sizeOptions" [hidden]="!total">
    </lv-paginator>
</div>
